import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Card, notification } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

const FormItem = Form.Item;

@connect(({ facilitatorDivided, loading }) => ({
  facilitatorDivided,
  loading: loading.models.list,
}))
@Form.create()
class FacilitatorDivided extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'facilitatorDivided/fetch',
    });
  }

  handleSubmit = e => {
    const { dispatch, form } = this.props;
    e.preventDefault();
    form.validateFieldsAndScroll(async (err, values) => {
      if (!err) {
        await dispatch({
          type: 'facilitatorDivided/update',
          payload: values,
        });
        notification.success({
          message: '成功提交',
          description: '您已成功提交！',
        });
      }
    });
  };

  render() {
    const {
      facilitatorDivided: { facilitatorCommissionRatio },
    } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    return (
      <PageHeaderWrapper title="服务商分成" content="服务商分成">
        <Card bordered={false}>
          <Form
            onSubmit={this.handleSubmit}
            hideRequiredMark
            style={{ marginTop: 8, fontSize: '30px' }}
          >
            {facilitatorCommissionRatio ? (
              <FormItem {...formItemLayout} label="服务商分成" key={facilitatorCommissionRatio.key}>
                <a style={{ fontSize: '20px', color: 'black' }}>
                  {facilitatorCommissionRatio.value}
                </a>
              </FormItem>
            ) : (
              ''
            )}
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }} />
          </Form>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default FacilitatorDivided;
